<template>
	<view>
        <view>
            <u-alert-tips type="warning" :title="title" :description="description"></u-alert-tips>
        </view>

        <view class="block-view">
            <view class="u-flex u-row-between">
                <view>退款方式</view>
                <view v-if="isRetrace">原路退回</view>
                <view v-else-if="isRetraceBalance">预存款退款</view>
                <view v-else>账号退款</view>
            </view>
            <u-line margin="20rpx 0rpx"></u-line>
            <view class="u-flex u-row-between">
                <view>退款金额</view>
                <view>
                    <u-input v-model="orderDetail.order_price" :disabled="true" input-align="right" ></u-input>
                </view>
            </view>
            <u-line margin="20rpx 0rpx"></u-line>
            <view class="u-flex u-row-between">
                <view>取消原因</view>
                <view @click="reasonShow = true">
                    <text>{{form.refund_reason}}</text>
                    <u-icon class="u-margin-left-20" name="more-dot-fill"></u-icon>
                </view>
            </view>
            <u-line margin="20rpx 0rpx"></u-line>
            <template v-if="!isRetrace && !isRetraceBalance">
                <view class="u-flex u-row-between">
                    <view>账号类型</view>
                    <view @click="alterSaleWayShow = true">
                        <text>{{form.account_type_str}}</text>
                        <u-icon class="u-margin-left-20" name="more-dot-fill"></u-icon>
                    </view>
                </view>
                <u-line margin="20rpx 0rpx" v-if="form.account_type != 'BANKTRANSFER' && form.account_type !== 'BALANCE'"></u-line>
                <view class="u-flex u-row-between" v-if="form.account_type != 'BANKTRANSFER' && form.account_type !== 'BALANCE'">
                    <view>退款账号</view>
                    <view>
                        <u-input v-model="form.return_account" input-align="right" placeholder="请输入退款账号"></u-input>
                    </view>
                </view>
                <u-line margin="20rpx 0rpx" v-if="form.account_type == 'BANKTRANSFER'"></u-line>
                <view v-if="form.account_type == 'BANKTRANSFER'">
                    <view class="u-flex u-row-between">
                        <view>银行名称</view>
                        <view>
                            <u-input v-model="form.bank_name" input-align="right" placeholder="请输入银行名称"></u-input>
                        </view>
                    </view>
                    <u-line margin="20rpx 0rpx"></u-line>
                    <view class="u-flex u-row-between">
                        <view>银行账号</view>
                        <view>
                            <u-input v-model="form.bank_account_number" input-align="right" placeholder="请输入银行账号"></u-input>
                        </view>
                    </view>
                    <u-line margin="20rpx 0rpx"></u-line>
                    <view class="u-flex u-row-between">
                        <view>银行开户名</view>
                        <view>
                            <u-input v-model="form.bank_account_name" input-align="right" placeholder="请输入银行开户名"></u-input>
                        </view>
                    </view>
                    <u-line margin="20rpx 0rpx"></u-line>
                    <view class="u-flex u-row-between">
                        <view>银行开户行</view>
                        <view>
                            <u-input v-model="form.bank_deposit_name" input-align="right" placeholder="请输入银行开户行"></u-input>
                        </view>
                    </view>
                </view>
                <u-line margin="20rpx 0rpx"></u-line>
            </template>
            <view class="u-flex u-row-between" >
                <view>联系方式</view>
                <view>
                    <u-input v-model="form.mobile" input-align="right" placeholder="请输入联系方式"></u-input>
                </view>
            </view>
        </view>

        <view class="btn-view">
            <u-button type="error" shape="circle" @click="onSubmit">提交</u-button>
        </view>

        <u-popup class="block-popup" v-model="reasonShow" mode="bottom" length="80%">
            <view class="header">
                取消订单
            </view>
            <view class="body">
                <view class="title">
                    请选择申请原因（必选）：
                </view>
                <u-radio-group v-model="form.refund_reason">
                    <view class="value">
                        <view class="radio-view" v-for="(item,index) in reasonList">
                            <u-radio active-color="red" label-size="31" shape="circle" :name="item.name" @change="reasonChange">{{item.name}}</u-radio>
                        </view>
                    </view>
                </u-radio-group>
            </view>
        </u-popup>
        <u-select v-model="alterSaleWayShow" :list="alterSaleWayList" @confirm="alterSaleWayChange"></u-select>
        <u-toast ref="uToast" />
	</view>
</template>

<script>

    import * as API_Order from '@/api/order.js';
    import * as API_AfterSale from '@/api/after-sale.js';
    import { RegExp } from '@/ui-utils/index.js';

	export default {
		data() {
			return {
                orderDetail: {},
                title: '温馨提示：',
                description: '1. 订单取消后无法恢复；',
                alterSaleWayList: [{
                		value: 'ALIPAY',
                		label: '支付宝'
                	},{
                		value: 'WEIXINPAY',
                		label: '微信'
                	},{
                		value: 'BANKTRANSFER',
                		label: '银行转账'
                    },{
                		value: 'BALANCE',
                		label: '预存款'
                }],
                alterSaleWayShow: false,
                reasonShow: false,
                isRetrace: true, //是否支持原路退款
                isRetraceBalance: false, //是否为预存款退款
                reasonList: [{
                        name: '商品质量有问题',
                        disabled: false
                    },
                    {
                        name: '收到商品与描述不符',
                        disabled: false
                    },
                    {
                        name: '不喜欢/不想要',
                        disabled: false
                    },
                    {
                        name: '发票问题',
                        disabled: false
                    },
                    {
                        name: '空包裹',
                        disabled: false
                    },
                    {
                        name: '快递无记录',
                        disabled: false
                    },
                    {
                        name: '快递一直没有收到',
                        disabled: false
                    },
                    {
                        name: '买错/不想要',
                        disabled: false
                    },
                    {
                        name: '未按照时间发货',
                        disabled: false
                    },
                    {
                        name: '其他',
                        disabled: false
                }],
                form: {
                    order_sn: '',
                    refund_reason: '请选择申请原因',  //申请售后原因
                    account_type: 'ALIPAY',   //账户类型（退款方式）
                    account_type_str: '支付宝',   //账户类型（退款方式）
                    refuse_type: '',     //退款/退货
                    refund_sn:'',        //退货单号
                    return_num: 1,      //退货数量
                    return_money: 0,    //申请金额
                    return_account: '', //退款账号
                    refund_price: 0.00, //退款金额
                    customer_remark: '' ,//备注
                    sku_id: 0,
                    mobile: '',
                    //账号类型为 BANKTRANSFER 必要的参数
                    bank_name: '',      //银行名称
                    bank_account_number: '',    //银行账号
                    bank_account_name: '',      //银行开户名
                    bank_deposit_name: '',      //银行开户行
                }
			};
		},
        onLoad(options) {
            this.form.order_sn = options.order_sn;
            this.loadData();
		},
        methods: {
            alterSaleWayChange(e){
                this.form.account_type = e[0].value;
                this.form.account_type_str = e[0].label;
            },
            loadData(){
                API_Order.getOrderDetail(this.form.order_sn).then(res => {
                    this.orderDetail = res;
                    this.isRetrace = res.is_retrace;
                    this.isRetraceBalance = res.is_retrace_balance;
                })
            },
            reasonChange(reason) {
                this.form.refund_reason = reason;
                this.reasonShow = false;
            },
            /** 校验参数 */
            handleCheckParams() {
                // 取消原因校验
                if (!this.form.refund_reason || this.form.refund_reason === '请选择申请原因') {
                    this.$u.toast('请选择申请原因！')
                    return
                }

                // 如果不支持原路退款
                if (!this.isRetrace && !this.isRetraceBalance) {
                    // 账户类型校验
                    if (!this.form.account_type) {
                        this.$u.toast('请选择账户类型！')
                        return
                    }

                    // 如果账户类型不为银行卡
                    if (this.form.account_type != 'BANKTRANSFER' && this.form.account_type != 'BALANCE') {
                        // 退款账号校验
                        if (!this.form.return_account) {
                            this.$u.toast('请输入退款账号！')
                            return
                        }
                    } else if (this.form.account_type == 'BANKTRANSFER') {
                        // 银行名称校验
                        if (!this.form.bank_name) {
                            this.$u.toast('请输入银行名称！')
                            return
                        }
                        // 银行开户行校验
                        if (!this.form.bank_deposit_name) {
                            this.$u.toast('请输入银行开户行！')
                            return
                        }
                        // 银行开户名校验
                        if (!this.form.bank_account_name) {
                            this.$u.toast('请输入银行开户名！')
                            return
                        }
                        // 银行账号校验
                        if (!this.form.bank_account_number) {
                            this.$u.toast('请输入银行账号！')
                            return
                        }
                    }
                }

                // 联系方式校验
                if (!this.form.mobile || !RegExp.mobile.test(this.form.mobile)) {
                    this.$u.toast('请输入正确格式的手机号码！')
                    return
                }

                return true
            },
            onSubmit(){
                // 校验参数
                if (!this.handleCheckParams()) return
                const _params = {
                    reason: this.form.refund_reason,
                    mobile: this.form.mobile,
                    account_type: this.form.account_type,
                    return_account: this.form.return_account,
                    refund_price: this.orderDetail.order_price,
                    order_sn: this.form.order_sn,
                }
                API_AfterSale.applyAfterSaleCancel(_params).then(res => {
                    this.$u.toast('提交成功')
                    uni.navigateBack()
                    uni.$emit('back')
                })
            }
        }
	}
</script>

<style lang="scss">
    .cell-view {
        margin: 10rpx 20rpx;
        background-color: #FFFFFF;
        padding: 10rpx;
        border-radius: 8rpx;
    }
    .block-view {
        background-color: #FFFFFF;
        padding: 30rpx;
        border-radius: 10rpx;
        margin: 15rpx 0rpx;
    }
    .btn-view {
        padding: 0rpx 30rpx;
        margin-top: 60rpx;
    }
    .block-popup {
        .header {
            padding: 20rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        .body {
            padding: 20rpx 30rpx;
            .title {
                font-weight: 600;
            }
            .value {
                display: flex;
                flex-direction: column;
                .radio-view {
                    margin: 10rpx 0rpx;
                }
            }
        }
        .footer {
            padding: 0rpx 20rpx;
        }
    }
</style>
